import React from 'react';
import { FormattedMessage } from 'umi';
import Clipboard from 'clipboard';
import { CopyOutlined } from '@ant-design/icons';
import { Button, Tooltip } from 'antd';

export default function ClipButton({ value }) {
  const clipboard = new Clipboard('.clip');
  clipboard.on('success', (e) => {
  }
  );
  clipboard.on('error', function (e) {
    console.error('Action:', e.action);
    console.error('Trigger:', e.trigger);
  });
  return (
    <Tooltip trigger='click' title={<FormattedMessage id="common.clipboard.success" defaultMessage="复制成功" />}>
      <Button className="clip" data-clipboard-text={value} style={{ border: 'none', backgroundColor: 'transparent' }} icon={<CopyOutlined />}></Button>
    </Tooltip>
  );
}
